<!doctype html>

<!--
WebSocket聊天客户端
基于WebSocket和WebRTC的多用户聊天示例与双向视频
呼叫，包括在适当或必要时轮流呼叫。
该文件提供了聊天客户端web页面的结构，包括
登录，文字聊天，给其他用户打私人视频电话。
要了解这个示例如何工作:http://bit.ly/webrtc-from-chat
任何版权都属于公共领域。
http: creativecommons.org/publicdomain/zero/1.0/
-->

<html>
<head>
  <title>WebSocket聊天演示与WebRTC</title>
  <meta charset="utf-8">
  <link href="chat.css" rel="stylesheet">
  <link href="../shared.css" rel="stylesheet">
  <script type="text/javascript" src="chatclient.js"></script>
  <script src="adapter.js"></script>
</head>
<body>
  <div class="container">
    <div class="infobox">
      <!-- <p>这是一个使用WebSockets实现的简单聊天系统。它通过与服务器来回发送JSON包来工作。 -->
        <!-- <a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-from-chat"> -->
      <!-- 查看源代码</a>在Github上。</p> -->
      <!-- <p class="mdn-disclaimer">此文本和音频/视频聊天示例按原样提供，仅用于演示目的，不应将其用于任何其他目的。 -->
      <!-- </p> -->
      <p>单击用户列表中的用户名，要求他们与您进行一对一的视频聊天。</p>
      <p>输入用户名: <input id="name" type="text" maxlength="12" required autocomplete="username" inputmode="verbatim" placeholder="Username">
        <input type="button" name="login" value="登录" onclick="connect()"></p>
    </div>
    <ul class="userlistbox"></ul>
    <div class="chatbox"></div>
    <div class="camerabox">
      <video id="received_video" autoplay></video>
      <video id="local_video" autoplay muted></video>
      <button id="hangup-button" onclick="hangUpCall();" role="button" disabled>
        挂断
      </button>
    </div>
    <div class="empty-container"></div>
    <div class="chat-controls">
      聊天:<br/>
      <input id="text" type="text" name="text" size="100" maxlength="256" placeholder="说一些有意义的事情…" autocomplete="off" onkeyup="handleKey(event)" disabled>
      <input type="button" id="send" name="send" value="发送" onclick="handleSendButton()" disabled>
    </div>
  </div>
</body>
</html>
